import './TempImageText.scss'

import { useEffect, useState } from 'react'
import { ColorCallBack, SpacingCallBack, SpacingWidthCallBack, assembleDataA01 } from '../Utils'
import { LayoutDeftula } from '../Config/LayoutDeftula'
import { ICONMapping } from '../Config/IconMapping'

const testData = [
    { icon: 'SyncOutlined', label: '加载...', value: '0', unit: '个' },
    { icon: 'SyncOutlined', label: '加载...', value: '0', unit: '个' },
    { icon: 'SyncOutlined', label: '加载...', value: '0', unit: '个' },
    { icon: 'SyncOutlined', label: '加载...', value: '0', unit: '个' },
]

const TempImageTextA04 = ({ config, apiData }) => {
    const [Data, setData] = useState()
    const configuration = config || LayoutDeftula.ImageTextA04


    const {
        data_apiName, data_dataLevel,
        partial_width, partial_padding, partial_margin, partial_back, partial_deg, partial_radius, partial_borderSize, partial_emptyBorderType, partial_borderColor,
        icon_status, icon_iconFill, icon_iconColor, icon_iconSize, icon_imgWidth, icon_imgHeight,
        icon_padding, icon_margin, icon_back, icon_deg, icon_radius, icon_borderSize, icon_borderType, icon_borderColor,
        icon_shadowX, icon_shadowY, icon_shadowS, icon_shadowC,
        content_padding, content_margin, content_back, content_deg, content_radius, content_borderSize, content_emptyBorderType, content_borderColor,
    } = configuration

    const flexStyle = {
        '--alignItems': configuration.align_items,
        '--justifyContent': configuration.justify_content,
        '--flexDirection': configuration.flex_direction,
        '--alignContent': configuration.align_content,
        '--flexWrap': configuration.flex_wrap,
    }

    const partial = {
        '--partialAlignItems': configuration.partial_align_items,
        '--partialAlignContent': configuration.partial_align_content,
        '--partialJustifyContent': configuration.partial_justify_content,
        '--partialFlexDirection': configuration.partial_flex_direction,
        width: SpacingWidthCallBack(partial_margin, partial_width),
        padding: SpacingCallBack(partial_padding),
        margin: SpacingCallBack(partial_margin),
        background: ColorCallBack(partial_back, partial_deg),
        borderRadius: partial_radius,
        border: `${partial_borderSize}px ${partial_emptyBorderType} ${partial_borderColor}`,
    }

    const iconStyle = {
        padding: SpacingCallBack(icon_padding),
        margin: SpacingCallBack(icon_margin),
        background: ColorCallBack(icon_back, icon_deg),
        borderRadius: icon_radius,
        border: `${icon_borderSize}px ${icon_borderType} ${icon_borderColor}`,
    }

    const iconShadow = {
        filter: `drop-shadow(${icon_shadowX}px ${icon_shadowY}px ${icon_shadowS}px ${icon_shadowC})`
    }

    const contentStyle = {
        '--contentAlignItems': configuration.content_align_items,
        '--contentAlignContent': configuration.content_align_content,
        '--contentJustifyContent': configuration.content_justify_content,
        '--contentFlexDirection': configuration.content_flex_direction,
        padding: SpacingCallBack(content_padding),
        margin: SpacingCallBack(content_margin),
        background: ColorCallBack(content_back, content_deg),
        borderRadius: content_radius,
        border: `${content_borderSize}px ${content_emptyBorderType} ${content_borderColor}`,
    }

    const describeStyle = {
        fontSize: configuration.describe_fontSize + 'px',
        height: configuration.describe_fontSize + 'px',
        lineHeight: configuration.describe_fontSize + 'px',
        fontFamily: configuration.describe_fontFamily,
        fontWeight: configuration.describe_fontWeight,
        fontStyle: configuration.describe_fontStyle,
        filter: `drop-shadow(${configuration.describe_shadowX}px ${configuration.describe_shadowY}px ${configuration.describe_shadowB}px ${configuration.describe_shadowC})`,
    }

    const fieldStyle = {
        padding: SpacingCallBack(configuration.field_padding),
        '--fieldFill': ColorCallBack(configuration.field_fill, configuration.field_deg),
        fontSize: configuration.field_fontSize + 'px',
        height: configuration.field_fontSize + 'px',
        lineHeight: configuration.field_fontSize + 'px',
        fontFamily: configuration.field_fontFamily,
        fontWeight: configuration.field_fontWeight,
        fontStyle: configuration.field_fontStyle,
        filter: `drop-shadow(${configuration.field_shadowX}px ${configuration.field_shadowY}px ${configuration.field_shadowB}px ${configuration.field_shadowC})`,
    }

    const unitStyle = {
        '--unitFill': ColorCallBack(configuration.unit_fill, configuration.unit_deg),
        fontSize: configuration.unit_fontSize + 'px',
        height: configuration.unit_fontSize + 'px',
        lineHeight: configuration.unit_fontSize + 'px',
        fontFamily: configuration.unit_fontFamily,
        fontWeight: configuration.unit_fontWeight,
        fontStyle: configuration.unit_fontStyle,
        filter: `drop-shadow(${configuration.unit_shadowX}px ${configuration.unit_shadowY}px ${configuration.unit_shadowB}px ${configuration.unit_shadowC})`,
    }

    const assisStyle = {
        background: ColorCallBack(configuration.assis_fill, configuration.assis_deg),
        height: configuration.assis_height + 'px',
        [configuration.assis_position]: configuration.assis_distance,
    }

    useEffect(() => {
        if (apiData?.length !== 0 && data_apiName && data_dataLevel) {
            const data = assembleDataA01(configuration, apiData)
            setData(data)
        } else {
            setData(testData)
        }
    }, [config, apiData])



    return (
        <div className='TempImageTextA04' style={flexStyle}>
            {Data && Data.map((item, index) => {
                const fill = ColorCallBack(item.color || configuration.describe_fill, configuration.describe_deg)
                return (
                    <div key={index} className='TempImageTextA04_item' style={partial}>
                        {icon_status !== 'none' &&
                            <div className='IconAImage' style={iconStyle}>
                                {icon_status === 'img' &&
                                    <img style={{ width: icon_imgWidth, height: icon_imgHeight, ...iconShadow }} src={item.image} alt={item.label} />
                                }
                                {icon_status === 'icon' &&
                                    <div style={{ color: icon_iconFill ? item.color : icon_iconColor, fontSize: icon_iconSize, ...iconShadow }}>
                                        {ICONMapping[item.icon]}
                                    </div>
                                }
                            </div>
                        }
                        <div className='TextBox' style={contentStyle}>
                            <div className='Describe' style={{ '--describeFill': fill, ...describeStyle }}>{item.label}</div>
                            <div className='Field' >
                                <div style={fieldStyle}>{item.value} </div>
                                <span style={unitStyle}>{item.unit}</span>
                            </div>
                            <div className='Assis' style={assisStyle} />
                        </div>
                    </div>
                )
            })}
        </div>
    );
};

export default TempImageTextA04;